<template>
  <div class="pie-chart">
    <div :id="chartId" class="pie-charts"></div>
  </div>
</template>

<script setup>
import { onMounted, onBeforeUnmount, ref } from 'vue';
import {
  XyDataSeries,
  FastLineRenderableSeries,
  SciChartSurface,
  NumericAxis,
  XyScatterRenderableSeries,
  EllipsePointMarker,
  AxisTitleStyle,
  EAxisAlignment,
  ELabelAlignment,
  ENumericFormat,
} from 'scichart';

const chartId = ref('pie-chart-' + Math.random().toString(36).substring(2, 9));

onMounted(async () => {
  try {
    const { sciChartSurface, wasmContext } = await SciChartSurface.create(chartId.value);

    sciChartSurface.xAxes.add(
      new NumericAxis(wasmContext, {
        axisTitle: 'X Axis',
        axisTitleStyle: {
          fontWeight: 'bold', // 可选：设置字体粗细
          textAnchor: 'end', // 文本对齐方式，可以设置为 "start", "middle", "end"
        },
        keepLabelsWithinAxis: false,
        axisBorder: { color: '#50C7E077', borderTop: 1 },
      })
    );
    sciChartSurface.yAxes.add(
      new NumericAxis(wasmContext, {
        axisTitle: 'Y Axis',
        // growBy,
        axisAlignment: EAxisAlignment.Left,
        labelFormat: ENumericFormat.Decimal,
        labelStyle: { alignment: ELabelAlignment.Left },
        // visibleRange: new NumberRange(0.1, 1E6),
        logBase: 10,
        axisBorder: { color: '#50C7E077', borderRight: 1 },
      })
    );

    const lineSeries = new FastLineRenderableSeries(wasmContext, {
      stroke: '#4083B7',
      strokeThickness: 2,
    });

    sciChartSurface.renderableSeries.add(lineSeries);

    const lineData = new XyDataSeries(wasmContext, { dataSeriesName: 'Sin(x)' });

    for (let i = 0; i < 1000; i++) {
      lineData.append(i, Math.sin(i * 0.1));
    }

    lineSeries.dataSeries = lineData;

    let phase = 0.0;

    const arr = [];

    const updateDataFunc = () => {
      for (let i = 0; i < 1000; i++) {
        lineData.update(i, Math.random());
      }

      phase += 0.01;
    };

    // Update data at 60Hz
    setInterval(updateDataFunc, 1);
  } catch (error) {
    console.error('Error initializing SciChart:', error);
  }
});

onBeforeUnmount(() => {
  // 清理定时器
  // if (intervalId) {
  //   clearInterval(intervalId);
  // }
  // // 清理 SciChart 表面
  // if (sciChartSurface) {
  //   sciChartSurface.delete();
  // }
});
</script>

<style scoped>
.line-charts {
  width: 100%;
  height: 400px; /* 调整高度以适应布局 */
}
</style>
